<template>
  <div>
    <ul>
      <li v-for="v in arr" :key="v.id">
        <img
          :src="v.imgs"
        />
        <p>{{v.name}}</p>
      </li>
    </ul>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
  </div>
</template>

<script>
import getlink from "@/api/apiserver.js";
export default {
  data() {
    return {
      value1: 0,
      value2: "a",
       arr: [],
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
  mounted(){
    // this.id = this.$route.query.id;
     getlink("/xiangqing").then((ok) => {
      // console.log(ok.data.xiangqing);
        // this.num = this.id

      this.arr = ok.data
    // this.arr.forEach( => {
         
    //  });
    });
  }
};
</script>

<style scoped>
ul {
  height: 1rem;
  width: 100%;
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
}
li {
  margin-right: 0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  text-align: center;

  border-radius: 8px;
}
li img {
  width: 53px;
  height: 53px;
  background-color: rgb(207, 203, 203);
}
p{
  overflow: hidden;
}
</style>
